<!doctype html>
<html>

<head>
	<title>Cinequest</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<script>
		
		var proxy = "cinequestProxy.php?";
		var selectedTab = -1;
		var festival;
		
		$(function(){

			getFestival();

			$('#index').on('pageshow', function(){
				var img = $('#img-cinequest');
				var width = img.width();
				var maxWidth = img.parent().width();
				if (width > maxWidth)
				{
					img.height(img.height * maxWidth / width);
					img.width(maxWidth);				
				}
						
			});

			$('#img-cinequest').load(function(){
				var img = $('#img-cinequest');
				var width = img.width();
				var maxWidth = img.parent().width();
				if (width > maxWidth)
				{
					img.height(img.height * maxWidth / width);
					img.width(maxWidth);				
				}
			});

			$('#festival').on('pageinit', function(){

			});

			$('#festival').on('pageshow', function(){
				if (selectedTab == -1 || selectedTab == 0)
				{
					$('#filmsTab').attr('checked', true).checkboxradio('refresh');
					$('#events').hide();
					$('#forums').hide();
					$('#films').show();
					selectedTab = 0;
				}
				else if (selectedTab == 1)
				{
					$('#eventsTab').attr('checked', true).checkboxradio('refresh');
					$('#films').hide();
					$('#forums').hide();
					$('#events').show();
					selectedTab = 1;
				}
				else if (selectedTab == 2)
				{
					$('#forumsTab').attr('checked', true).checkboxradio('refresh');
					$('#events').hide();
					$('#films').hide();
					$('#forums').show();
					selectedTab = 2;
				}
			});

			$('#filmsTab').click(function(){
				$('#events').hide();
				$('#forums').hide();
				$('#films').show();
				selectedTab = 0;
			});
			$('#eventsTab').click(function(){
				$('#films').hide();
				$('#forums').hide();
				$('#events').show();
				selectedTab = 1;
			});
			$('#forumsTab').click(function(){
				$('#events').hide();
				$('#films').hide();
				$('#forums').show();
				selectedTab = 2;
			});

			$('#events').append('<h1>Test 2</h1>');
			$('#forums').append('<h1>Test 3</h1>');

		});

		function getFestival(){
			$.ajax({
				type: "GET",
				url: proxy + "type=festival",
				data: "xml",
				success: function(xml){
					festival = xml;
					localStorage['festival'] = festival;
					loadDates();
					console.log('ajax success');
				},
				error: function(xhr){
					console.log('ajax failed:' + xhr.statusText);
				}
			});
		}

		function loadDates(){
			var currentDate = '';
			var dateParts;
			var dateDisplay;
			var count = -1;
			var htmlString = '';
			var tag;
			var nextDate;
			$(festival).find('schedule').each(function(){
				tag = $(this);
				nextDate = tag.attr('start_time').split(' ')[0];
				if(nextDate !== currentDate)
				{
					dateParts = nextDate.split('-');
					dateDisplay = dateParts[1] + '-' + dateParts[2] + '-' + dateParts[0];
					if(count > 0)
					{
						htmlString += '<span class="ui-li-count">' + count + '</span></a></li>' + '<li><a id="' + dateDisplay  +  '">' + dateDisplay;
					}
					else
					{
						htmlString += '<li><a id="' + dateDisplay  + '">' + dateDisplay;
					}
					count = 1;
					currentDate = nextDate;
				}
				else
				{
					count++;		
				}
			});
			htmlString += '<span class="ui-li-count">' + count + '</span></a></li>';
			$('#list-dates').append(htmlString);
			$('#list-dates').listview('refresh');
			$('#list-dates').on('click', 'a', function(){
				alert($(this).text());		
			});
			
		}
		
		function getFilms(){
			$.ajax({
				type: "GET",
				url: proxy + "type=schedules",
				data: "xml",
				success: function(xml){
					$(xml).find('schedule').each(function(){
						var tag = $(this);
						$('#list-films').append('<li><a id="pid-' + tag.attr('program_item_id') + '"><h3>' + tag.attr('title') + '</h3><p>' + tag.attr('start_time') + '&nbsp;&nbsp;&nbsp;' + tag.attr('venue') + '</p></a>' + '<a id="spid-' + tag.attr('program_item_id') + '"></a></li>');
					});
					$('#list-films').listview('refresh');
				}
			});
		}



	</script>
</head>

<body>
<!-- Index page -->
	<div data-role="page" id="index" data-title="Cinequest - Home" >

		<div data-role="header" data-id="mainheader" data-position="fixed" data-tap-toggle="false">
			<h1>Cinequest</h1>
			<a href="#schedule" class="ui-btn-right" data-icon="grid">Schedule</a>
			<div data-role="navbar">
				<ul>
					<li><a href="#" class="ui-btn-active ui-state-persist">Home</a></li>
					<li><a href="#festival">Festival</a></li>
					<li><a href="#dvds">DVDs</a></li>
				</ul>
			</div>
		</div>

		<div data-role="content">
			<div align="center">
				<img id="img-cinequest" src="img/creative.gif" />
			</div>
		</div>

	</div>

<!-- Festival page -->
	<div data-role="page" id="festival" data-title="Cinequest - Festival" >

		<div data-role="header" data-id="mainheader" data-position="fixed" data-tap-toggle="false">
			<h1>Cinequest</h1>
			<a href="#schedule" class="ui-btn-right" data-icon="grid">Schedule</a>
			<div data-role="navbar">
				<ul>
					<li><a href="#index">Home</a></li>
					<li><a href="#" class="ui-btn-active ui-state-persist">Festival</a></li>
					<li><a href="#dvds">DVDs</a></li>
				</ul>
			</div>
		</div>
		
		<div data-role="content">
			<div data-role="controlgroup" data-type="horizontal" align="center">
				<label for="filmsTab">Films</label>
				<input type="radio" id="filmsTab" name="festival-tabs" />
				<label for="eventsTab">Events</label>
				<input type="radio" id="eventsTab" name="festival-tabs" />
				<label for="forumsTab">Forums</label>
				<input type="radio" id="forumsTab" name="festival-tabs" />
			</div>

		<!-- Films page -->
			<div id="films">
				<br />
				<ul id="list-dates" data-role="listview" data-inset="true" data-filter="true">
					
				</ul>
			</div>

		<!-- Events page -->
			<div id="events" style="display:none">

			</div>

		<!-- Forums page -->
			<div id="forums" style="display:none">

			</div>



		</div>

	</div>

<!-- DVDs page -->
	<div data-role="page" id="dvds" data-title="Cinequest - DVDs" >

		<div data-role="header" data-id="mainheader" data-position="fixed" data-tap-toggle="false">
			<h1>Cinequest</h1>
			<a href"#schedule" class="ui-btn-right" data-icon="grid">Schedule</a>
			<div data-role="navbar">
				<ul>
					<li><a href="#index">Home</a></li>
					<li><a href="#festival">Festival</a></li>
					<li><a href="#" class="ui-btn-active ui-state-persist">DVDs</a></li>
				</ul>
			</div>
		</div>

		<div data-role="content">
			
		</div>

	</div>

</body>

</html>






















































